<template>
    <div id="Btns" i="btns" :style="{ justifyContent: justify }">
        <template v-for="(item, index) in data">
            <a-upload
                class="upload"
                :key="index"
                v-if="item.upload && $util.isShow(item.show)"
                v-permission="item.permission"
                ref="uploadForm"
                :action="item.action || uploadURL"
                :data="Object.assign(item.data || {}, uploadData)"
                :accept="item.accept || '.xlsx,.xls,.csv'"
                :showUploadList="false"
                :headers="$header()"
                :beforeUpload="handleBeforeUpload"
                @change="item.callback">
                <a-button
                    :icon="item.icon | btnIcon"
                    :type="item.type || 'primary'"
                    :shape="item.shape"
                    :ghost="item.ghost">
                    {{item.label}}
                </a-button>
            </a-upload>
            <a-button
                :key="index"
                v-if="!item.upload && $util.isShow(item.show)"
                v-permission="item.permission"
                :type="item.type || 'primary'"
                :icon="item.icon | btnIcon"
                :shape="item.shape"
                :ghost="item.ghost"
                @click="item.callback && item.callback()">
                {{item.label}}
            </a-button>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'

@Component({
    filters: {
        btnIcon (val: string) {
            const iconMap: any = {
                add: 'plus',
                download: 'cloud-download',
                export: 'cloud-upload'
            }
            return iconMap[val] || val
        }
    }
})
export default class Btns extends Vue {
    @Prop({ type: Array, default: () => [] }) data!: any[]
    @Prop({type: Number, default: 0}) index!: any
    @Prop({ type: String, default: 'flex-end' }) justify!: string

    uploadURL: string = ''
    uploadData: any = {}

    init () {
        this.uploadURL = util.uploadURL() || ''
        this.uploadData = {
            type: 4
        }
    }
    handleBeforeUpload ({name}: any) {
        let file = name.split('.').pop().toLowerCase()
        this.uploadData.type = ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'svg'].includes(file) ? 3 : 4
        return true
    }
}
</script>

<style lang="scss">
[i="btns"] {
    flex: 1;
    display: flex;
    overflow: hidden;
    > * {
        margin-left: 10px;
        &:first-child {
            margin-left: 0;
        }
    }
    .export-btn {
        float: left;
        margin-left: 20px;
        background: #4F92EA;
        border-color: #4F92EA;
        color: #fff;
        &:hover {
            background: #4F92EA;
            border-color: #4F92EA;
            color: #fff;
            opacity: .8;
        }
    }
    .add-btn {
        float: left;
    }
    .table-right {
        height: 40px;
        line-height: 40px;
        float: right;
    }
}
</style>
